<template>
  <div class="padtop">
    <van-card
      v-for="(item) in carParams"
      :key="item.id"
      :num="item.cou"
      :price="item.sell_price"
      :title="item.title"
      :thumb="item.thumb_path"
    >
      <div slot="tags">
        <van-checkbox v-model="item.selected" @click="goodsSelClick(item.id)"></van-checkbox>
      </div>
      <div slot="footer">
        <van-stepper v-model="item.cou" @change="countChange(item.id,item.cou)" integer />
      </div>
    </van-card>
    <!-- <van-submit-bar :price="totalGetter" button-text="提交订单" @submit="onSubmit" /> -->
    <van-submit-bar :price="totalGetter" :loading="loading" button-text="提交订单" button-size="mini" @submit="onSubmit">
      <van-checkbox v-model="isAllSel" @click="allSel">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>
<script>
import { mapState, mapMutations, mapGetters } from "vuex";
export default {
  data() {
    return {
      carParams: [],
      //是否全部选中
      isAllSel: true,
      //提交动画
      loading: false
    };
  },
  created() {
    this.getCarParams();
    this.initCar();
  },
  methods: {
    ...mapMutations([
      "addToCar",
      "setCar",
      "initCar",
      "goodsIsSel",
      "updateSel"
    ]),
    //获取car商品的详细信息
    async getCarParams() {
      let ids = "";
      this.car.forEach((item, ind) => {
        ids += item.id;
        if (ind < this.car.length - 1) {
          ids += ",";
        }
      });
      const res = await this.$axios.get(`/api/goods/getshopcarlist/${ids}`);

      this.carParams = res.data.message;
      //将car里的count值赋值给carParams里的cou
      this.setSel();
      this.isAllSel = this.carParams.every(item => item.selected);
    },
    //将购物车新修改的值同步到vuex里的car 和本地存储
    countChange(id, count) {
      this.setCar({
        id: id,
        count: count
      });
      console.log(this.car);
      console.log(this.getTotal);
    },
    //按钮提交事件
    onSubmit() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.$toast.success('提交成功 钱包又空了');
      }, 1000);
    },
    //点击商品选框时触发
    goodsSelClick(id) {
      this.goodsIsSel(id);

      this.setSel();
      this.setAllSel();
      this.$forceUpdate();
      
    },
    //将car里的count值赋值给carParams里的cou selected赋值给carParames的selected
    setSel() {
      this.carParams.forEach((item, index) => {
        let i = this.car.findIndex(item1 => item1.id === item.id);
        item.cou = this.car[i].count;
        item.selected = this.car[i].selected;
      });
    },
    //全选事件
    allSel() {
      console.log(this.isAllSel);
      this.$store.commit("setAllSel", this.isAllSel);
      this.setSel();
      this.$forceUpdate();
    },
    //点击单个选框时 判断isAllSel的状态
    setAllSel() {
      this.isAllSel = this.carParams.every(item => item.selected);
    }
  },
  computed: {
    ...mapState(["car"]),
    ...mapGetters(["getTotal", "getIsAllSel"]),
    totalGetter() {
      return this.getTotal * 100;
    }
  }
};
</script>
<style scoped lang="less">
.padtop{
  margin-top: 50px;
}
.van-card{
  margin: 10px 0;
}
.van-card:not(:first-child){
  margin: 10px 0!important;
}
.van-card__header{
  height: 60px;
}
.padtop .van-card__thumb{
  width: 50px!important;
}
.van-submit-bar{
  width: 100%;
  .van-button{
    width: 110px;
  }
}
</style>